<template>
    <AoeCard class="introduction">
        <p class="title">简单表单</p>
        <p class="describe">
            表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。表单域标签也可支持响应式.
        </p>
    </AoeCard>
    <AoeContainer :fluid="true" class="content-wrapper">
        <AoeCard class="form-box">
            <AoeRow>
                <AoeCol :md="10" :md-offset="7">
                    <AoeSchemaForm
                        :elements="fields"
                        v-model="value"
                        v-bind="$attrs"
                    >
                        <AoeFormItem>
                            <AoeRow :space="20">
                                <AoeCol :md="12">
                                    <AoeButton
                                        :fluid="true"
                                        @click="onsubmit"
                                        type="primary"
                                        native-type="submit"
                                    >
                                        提交
                                    </AoeButton>
                                </AoeCol>
                                <AoeCol :md="12">
                                    <AoeButton
                                        :fluid="true"
                                        @click="onreset"
                                        native-type="reset"
                                    >
                                        重置
                                    </AoeButton>
                                </AoeCol>
                            </AoeRow>
                        </AoeFormItem>
                    </AoeSchemaForm>
                </AoeCol>
            </AoeRow>
        </AoeCard>
    </AoeContainer>
</template>

<script setup lang="ts">
import { AoeSchemaForm } from 'form-ui-aoe';
import type { FieldSchema } from 'aoe';
import type { IValues } from 'aoe';
import { AoeCard, AoeContainer, AoeRow, AoeCol, AoeFormItem } from 'ui-aoe';
import { AoeButton } from '../../../layui';
// import { ref } from 'vue';
const onsubmit = () => {};
const onreset = () => value.value = {};
// const value = ref<IValues>({});
const value = defineModel<IValues>('value');

const fields: FieldSchema[] = [
    {
        name: 'name',
        label: '姓名',
        id: 'name',
    },
    {
        name: 'gender',
        label: '性别',
        widget: 'switch',
        id: 'gender',
    },
    {
        name: 'like',
        label: '爱好',
        widget: 'checkbox',
        id: 'like',
        options: [
            {
                label: '足球',
                value: 0,
            },
            {
                label: '篮球',
                value: '1',
            },
            {
                label: '排球',
                value: 2,
            },
            {
                label: '棒球',
                value: '3',
            },
        ],
    },
    {
        name: 'level',
        label: '等级',
        widget: 'radio',
        id: 'like',
        options: [
            {
                label: '麻瓜',
                value: 0,
            },
            {
                label: '入门',
                value: '1',
            },
            {
                label: '中级',
                value: 2,
            },
            {
                label: '高级',
                value: '3',
            },
        ],
    },
];

const emit = defineEmits<{
    title: [t: string[]];
}>();
emit('title', ['用户管理', '新增用户']);

defineOptions({
    inheritAttrs: false,
});
</script>

<style scoped>
.introduction {
    margin: 10px;

    .title {
        font-size: 20px;
        font-weight: 500;
        margin-top: 12px;
        margin-bottom: 20px;
    }

    .describe {
        font-size: 14px;
        margin-bottom: 12px;
    }
}

.content-wrapper {
    padding: 0 10px 10px;

    .form-box {
        padding: 30px;
    }
}
</style>
